<template>
	<div id="box">
		<van-list
		  v-model="loading"
		  :finished="finished"
		  finished-text="你已经看到我的底线了"
		  @load="onLoad"
		  :immediate-check='false'
		>
			<van-cell class="movie" v-for="item in datalist" :key="item.filmId" @click="toDetail(item.filmId)">
				<li>
					<img :src= "item.poster" />
				</li>
				<li>
					<div>{{item.name}}</div>
					<div><span class='yanyuan' v-for="suoyin in item.actors">{{suoyin.name}}</span></div>
					<div>{{item.nation}} | {{item.runtime}}分钟</div>
				</li>
				<li>
					<button type="button">预约</button>
				</li>
			</van-cell>
		</van-list>
	</div>
</template>

<script>
	import http from '@/util/http.js'
	export default{
		data(){
			return{
				datalist:[],
				loading: false,
				finished: false,
				current:1
			}
		},
		mounted() {
			let _this = this
			setTimeout(()=>{
				http({
					url:`/gateway?cityId=${this.$store.state.cityId}&pageNum=1&pageSize=10&type=2&k=1775786`,
					headers:{
						'X-Host':'mall.film-ticket.film.list'
					}
				}).then(res => {_this.datalist = res.data.data.films;})
			},1000)
		},
		methods:{
			toDetail(id){
				this.$router.push(`/Detail/${id}`)
			},
			onLoad(){
				this.current++;
				let _this = this;
				setTimeout(()=>{
					http({
						url:`/gateway?cityId=310100&pageNum=${this.current}&pageSize=10&type=2&k=1775786`,
						headers:{
							'X-Host':'mall.film-ticket.film.list'
						}
					}).then(res => {
						_this.datalist = [..._this.datalist, ...res.data.data.films];
						_this.loading = true;
						if (this.datalist.length >= res.data.data.total) {
						          _this.finished = true;
						        }
						})
				},1000)
			}
		}
	}
</script>

<style type="text/css" lang="scss" scoped="scoped">
	.movie>div{
		display: flex;
		justify-content: space-around;
		align-items: center;
		list-style-type: none;
		height: 7.5rem;
		font-size: 15px;
	}
	.movie>div>li>div{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.movie>div>li:nth-child(1){
		width: 3.5rem;
		height: 5rem;
	}
	.movie>div>li:nth-child(1)>img{
		width: 100%;
		height: 100%;
	}
	.movie>div>li:nth-child(2){
		width: 11rem;
		height: 6.25rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.movie>div>li:nth-child(2)>div{
		color: gray;
	}
	.movie>div>li:nth-child(2)>div:nth-child(1){
		font-size: 18px;
		font-weight: bold;
		color: black;
	}
	.movie>div>li:nth-child(3){
		width: 2rem;
		height: 6.25rem;
		display: flex;
	}
	.movie>div>li:nth-child(3)>button{
		margin: auto;
	}
	.yanyuan{
		margin-right: 0.3125rem;
	}
	button{
		outline: none;
		border: none;
		background-color: white;
	}
</style>
